﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div style="padding: 16px">

        <div class="layui-card">
            <div class="layui-card-body">
                <h3>员工绩效</h3>
                <table class="layui-hide" id="testSalaryDetail" lay-filter="testSalaryDetail"></table>
            </div>
        </div>
    </div>

    <script>

        layui.use(['table', 'tree', 'util'], function () {
            var table = layui.table;
            var util = layui.util;
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util
            //第一个实例
            table.render({
                elem: '#testSalaryDetail'
                , defaultToolbar: []
                , height: "full-100"// 最大高度减去其他容器已占有的高度差
                , toolbar: '#toolbarDemoSalary'
                , url: '/Manager/DataList' //数据接口
                , page: true //开启分页
                , limit: 10 //每页默认显示的数量
                , cols: [[ 
                    , { field: 'Number', title: '员工编号', width: 86 }
                    , { field: 'Name', title: '员工姓名' }
                    , { field: 'Phone', title: '员工电话' }
                    , { field: 'AllCount', title: '录入数量' }
                    , { field: 'SuccessCount', title: '转化数量' }
                    , { fixed: 'right', title: '操作', width: 90, toolbar: '#barDemoSalary' }
                ]]
            });
            table.on('toolbar(testSalaryDetail)', function (obj) {
                if (obj.event === 'search') {
                    var phone = $('input[name=parturientphone]').val();
                    var name = $('input[name=parturientname]').val();
                    //var checkStatus = table.checkStatus(obj.config.id);
                    //var data = checkStatus.data;
                    //console.log(data)
                    table.reload('testSalaryDetail', {
                        where: {
                            // 这里的参数是请求接口的参数
                            // search: $('#search').val()
                            phone,
                            name
                        }
                    });
                    $('input[name=parturientphone]').val(phone);
                    $('input[name=parturientname]').val(name);
                } else if (obj.event === 'allanalyse') {
                    layer.open({
                        title: '统计分析',
                        type: 2,
                        area: ['80%', '80%'],
                        content: '/Manager/AllAnalyse',
                    });
                }
            });
            table.on('tool(testSalaryDetail)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'analyse') {
                    layer.open({
                        title: data.Name+'统计分析',
                        type: 2,
                        area: ['80%', '80%'],
                        content: '/Manager/Analyse?data=' + encodeURIComponent(JSON.stringify(data)),
                    });
                }    
            });
        });
    </script>
    <script type="text/html" id="toolbarDemoSalary">
        <div class="layui-btn-container" style="width: auto;">
            <div class="layui-form-item" style="position: relative;">
                <label class="layui-form-label" style="width:90px">员工姓名</label>
                <div class="layui-input-inline">
                    <input type="tel" name="parturientname" autocomplete="off" class="layui-input" style="height: 30px;">
                </div>
                <label class="layui-form-label" style="width:90px">员工电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="parturientphone" autocomplete="off" class="layui-input" style="height: 30px;">
                </div>
                <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
                <button class="layui-btn layui-btn-sm" lay-event="allanalyse" style="position: fixed;right: 3%;">统计分析</button>
            </div>
        </div>
    </script>
    <script type="text/html" id="barDemoSalary">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="analyse">统计分析</a>
        </div>
    </script>
</body>
</html>

